<template>
  <div id="app">
    <div class="app-player">
      <!-- 头部部分 -->
      <div class="app-player-header">
        <music-header @getlist="handleGetMusicList" @getimgshow="handleImgShow"></music-header>
      </div>
      <!-- 主体内容部分 -->
      <div class="app-player-content">
        <music-content
          :isaudioplaying="isAudioPlaying"
          :is-img-show="isImgShow"
          :song-list="songList"
          @geturl="handleGetSongUrl"
          @getmvurl="handleGetMvUrl"
        ></music-content>
      </div>
      <!-- 底部部分 -->
      <div class="app-player-footer">
        <music-footer
          @pause="handlePause"
          @play="handlePlay"
          :song-url="songUrl"
        ></music-footer>
      </div>
    </div>
    <div :class="['music-mv', { mvhidden: hiddenVedio }]">
      <div class="mv-close" @click.stop="handleMvClose">×</div>
      <div class="mv-video">
        <video
          ref="vedio"
          :src="mvUrl"
          autoplay="autoplay"
          controls="controls"
          loop="loop"
        ></video>
      </div>
      <div class="mv-mask"></div>
    </div>
  </div>
</template>

<script>
import MyMusicHeader from "@/components/MusicHeader";
import MyMusicContent from "@/components/MusicContent";
import MyMusicFooter from "@/components/MusicFooter";

export default {
  name: "App",
  data: function () {
    return {
      songList: [],
      songUrl: "", // 歌曲的url
      mvUrl: "", // mv的url
      hiddenVedio: true, //默认不显示mv
      isAudioPlaying: false,
      isImgShow:false,  // 默认不显示content的中间部分
      picUrl: "", // 封面的url
    };
  },
  components: {
    "music-header": MyMusicHeader,
    "music-content": MyMusicContent,
    "music-footer": MyMusicFooter,
  },
  methods: {
    handleImgShow:function(isImgShow){
      this.isImgShow = isImgShow;
    },
    handlePause: function (isAudioPlaying) {
      this.isAudioPlaying = isAudioPlaying;
    },
    handlePlay: function (isAudioPlaying) {
      this.isAudioPlaying = isAudioPlaying;
    },
    handleGetMusicList: function (songList) {
      this.songList = songList;
    },
    handleGetSongUrl: function (songUrl) {
      this.songUrl = songUrl;
    },
    handleGetMvUrl: function (mvUrl) {
      this.mvUrl = mvUrl;
      // 显示弹出mv
      this.hiddenVedio = false;
    },
    // 关闭mv
    handleMvClose: function () {
      this.hiddenVedio = true;
      // 关闭mv之后，停止播放mv
      this.$refs.vedio.pause();
    },
  },
};
</script>

<style>
#app {
  background: url(./assets/images/bg.jpeg) no-repeat;
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  --themeColor: #1baad5;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.app-player {
  width: 800px;
  height: 600px;
}
.app-player-header {
  height: 60px;
  width: 100%;
  background-color: var(--themeColor);
}
.app-player-content {
  width: 100%;
  height: 480px;
  background: rgba(255, 255, 255, 0.5);
}
.app-player-footer {
  height: 60px;
  width: 100%;
  background-color: var(--themeColor);
}
.mvhidden {
  display: none;
}
.music-mv {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.mv-close {
  color: #fff;
  font-size: 40px;
  position: absolute;
  right: 35px;
  top: 35px;
  cursor: pointer;
  z-index: 200;
}
.mv-video {
  width: 60%;
  height: 60%;
  position: fixed;
  left: 20%;
  top: 20%;
  margin: 0 auto;
  z-index: 100;
}
.mv-video video {
  width: 100%;
  height: 100%;
}
.mv-mask {
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  position: fixed;
  background: #000;
}
</style>
